<template>
  <div ref="dom" class="echarts" />
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'
import { on, off } from '@/utils'
export default {
  name: 'YlCharts',
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dom: null
    }
  },
  watch: {
    option(val) {
      if (val) {
        this.$nextTick(() => {
          this.dom.setOption(val)
          on(window, 'resize', this.resize)
        })
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      if (this.option) {
        //console.log(this.option)
        this.dom.setOption(this.option)
        on(window, 'resize', this.resize)
      }
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  methods: {
    init() {
      this.dom = echarts.init(this.$refs.dom)
    },
    resize() {
      this.dom.resize()
    }
  }
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
